<template>
  <div>
    <div id="loading">
      <div id="loading-center">
        <div id="loading-center-absolute">
          <div id="object_four" class="object" />
          <div id="object_three" class="object" />
          <div id="object_two" class="object" />
          <div id="object_one" class="object" />
        </div>
      </div>

    </div>
    <el-progress
      style="position: fixed; z-index: 111;width: 40%;margin: 0 auto; left: 0px; right: 0px; top: 50%;"
      :text-inside="true"
      :stroke-width="20"
      :percentage="percentage"
      :color="customColors"
    />

  </div>

</template>

<script>
export default {
  props: ['back'],
  data() {
    return {
      percentage: 0,
      customColor: '#409eff',
      customColors: [

        { color: '#1989fa', percentage: 99 },
        { color: '#1989fa', percentage: 100 }
      ],
      num: 0
    }
  },
  created() {
    this.action()
  },
  methods: {
    action() {
      this.change()
    },
    change() {
      if (this.back) {
        this.percentage = 100
        return
      }
      var arr = []
      for (var i = 0; i < 100; i++) {
        arr[i] = i
      }
      this.percentage = arr[this.num]
      this.num++
      if (this.num > arr.length - 1) {
        this.num--
      } else {
        var time = 0
        if (this.num < 20) {
          time = 10
        } else if (this.num < 50) {
          time = 50
        } else if (this.num < 70) {
          time = 100
        } else if (this.num < 90) {
          time = 300
        } else if (this.num < 100) {
          time = 500
        }
        setTimeout(this.change, time)
      }
    }
  }
}
</script>

<style>
  @import url("../public/loading/css/normalize.css");
  #loading{
  		background-color: #8e8e8e;
  		height: 100%;
  		width: 100%;
  		position: fixed;
  		z-index: 1;
  		margin-top: 0px;
  		top: 0px;
      overflow: hidden;
  	}
  	#loading-center{
  		width: 100%;
  		height: 100%;
  		position: relative;
  		}
  	#loading-center-absolute {
  		position: absolute;
  		left: 50%;
  		top: 35%;
  		height: 200px;
  		width: 200px;
  		margin-top: -100px;
  		margin-left: -100px;

  	}
  	.object{
  	    -moz-border-radius: 50% 50% 50% 50%;
  		-webkit-border-radius: 50% 50% 50% 50%;
  		border-radius: 50% 50% 50% 50%;
  		position: absolute;
  		border-left: 5px solid #FFF;
  		border-right: 5px solid #FFF;
  		border-top: 5px solid transparent;
  		border-bottom: 5px solid transparent;
  		-webkit-animation: animate 2s infinite;
  		animation: animate 2s infinite;
  		}

  	#object_one{
  		left: 75px;
  		top: 75px;
  		width: 50px;
  		height: 50px;
  		}

  	#object_two{
  		left: 65px;
  		top: 65px;
  		width: 70px;
  		height: 70px;
  		-webkit-animation-delay: 0.1s;
  	    animation-delay: 0.1s;
  		}

  	#object_three{
  		left: 55px;
  		top: 55px;
  		width: 90px;
  		height: 90px;
  		-webkit-animation-delay: 0.2s;
  	    animation-delay: 0.2s;
  		}
  	#object_four{
  		left: 45px;
  		top: 45px;
  		width: 110px;
  		height: 110px;
  		-webkit-animation-delay: 0.3s;
  	    animation-delay: 0.3s;

  		}

  	@-webkit-keyframes animate {

  	50% {
  		-ms-transform: rotate(180deg);
  	   	-webkit-transform: rotate(180deg);
  	    transform: rotate(180deg);
  	  }

  	100% {
  		-ms-transform: rotate(0deg);
  	   	-webkit-transform: rotate(0deg);
  	    transform: rotate(0deg);
  	  }

  	}

  	@keyframes animate {

  	50% {
  		-ms-transform: rotate(180deg);
  	   	-webkit-transform: rotate(180deg);
  	    transform: rotate(180deg);
  	  }

  	100% {
  		-ms-transform: rotate(0deg);
  	   	-webkit-transform: rotate(0deg);
  	    transform: rotate(0deg);
  	  }
  	}
</style>
